@page "/Stacked_Bar_Chart"

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <StackedBar Data=data1 Config="config1" />
        </ChildContent>
    </TabPane>
    <TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <StackedBar Data=data2 Config="config2" />
        </ChildContent>
    </TabPane>
</Tabs>


@code {
    #region 示例1

    object[] data1 = new object[] {
        new  {    地区= "华东",    细分= "公司",    销售额= 1454715.807999998,  },
        new  {    地区= "华东",    细分= "消费者",    销售额= 2287358.261999998,  },
        new  {    地区= "中南",    细分= "公司",    销售额= 1335665.3239999984,  },
        new  {
    地区= "中南",
    细分= "消费者",
    销售额= 2057936.7620000008,
  },
        new  {
    地区= "东北",
    细分= "公司",
    销售额= 834842.827,
  },
        new  {
    地区= "东北",
    细分= "消费者",
    销售额= 1323985.6069999991,
  },
        new  {
    地区= "华北",
    细分= "公司",
    销售额= 804769.4689999995,
  },
        new  {
    地区= "华北",
    细分= "消费者",
    销售额= 1220430.5610000012,
  },
        new  {
    地区= "西南",
    细分= "公司",
    销售额= 469341.684,
  },
        new  {
    地区= "西南",
    细分= "消费者",
    销售额= 677302.8919999995,
  },
        new  {
    地区= "西北",
    细分= "公司",
    销售额= 253458.1840000001,
  },
        new  {
    地区= "西北",
    细分= "消费者",
    销售额= 458058.1039999998,
  },
};

    StackedBarConfig config1 = new StackedBarConfig()
    {
        ForceFit = true,
        Title = new Charts.Title()
        {
            Visible = true,
            Text = "百分比堆叠条形图",
        },
        YField = "地区",
        XField = "销售额",
        Label = new BarViewConfigLabel()
        {
            Visible = true,
        },
        StackField = "细分",
    };


    #endregion 示例1


    #region 示例2

    object[] data2 = new object[] {
        new  {
    地区= "华东",
    细分= "公司",
    销售额= 1454715.807999998,
  },
        new  {
    地区= "华东",
    细分= "消费者",
    销售额= 2287358.261999998,
  },
        new  {
    地区= "华东",
    细分= "小型企业",
    销售额= 942432.3720000006,
  },
        new  {
    地区= "中南",
    细分= "公司",
    销售额= 1335665.3239999984,
  },
        new  {
    地区= "中南",
    细分= "消费者",
    销售额= 2057936.7620000008,
  },
        new  {
    地区= "中南",
    细分= "小型企业",
    销售额= 743813.0069999992,
  },
        new  {
    地区= "东北",
    细分= "公司",
    销售额= 834842.827,
  },
        new  {
    地区= "东北",
    细分= "消费者",
    销售额= 1323985.6069999991,
  },
        new  {
    地区= "东北",
    细分= "小型企业",
    销售额= 522739.0349999995,
  },
        new  {
    地区= "华北",
    细分= "公司",
    销售额= 804769.4689999995,
  },
        new  {
    地区= "华北",
    细分= "消费者",
    销售额= 1220430.5610000012,
  },
        new  {
    地区= "华北",
    细分= "小型企业",
    销售额= 422100.9870000001,
  },
        new  {
    地区= "西南",
    细分= "公司",
    销售额= 469341.684,
  },
        new  {
    地区= "西南",
    细分= "消费者",
    销售额= 677302.8919999995,
  },
        new  {
    地区= "西南",
    细分= "小型企业",
    销售额= 156479.9319999999,
  },
        new  {
    地区= "西北",
    细分= "公司",
    销售额= 253458.1840000001,
  },
        new  {
    地区= "西北",
    细分= "消费者",
    销售额= 458058.1039999998,
  },
        new  {
    地区= "西北",
    细分= "小型企业",
    销售额= 103523.308,
  },
};

    StackedBarConfig config2 = new StackedBarConfig()
    {
        ForceFit = true,
        Title = new Charts.Title()
        {
            Visible = true,
            Text = "堆叠条形图：label自动隐藏",
        },
        Description = new Description()
        {
            Visible = true,
            Text = "在堆叠条形图中，如果label的位置被设定为middle，即显示在条形中间。在对应形状大小不够摆放label的情况下，label会被自动隐藏。",
        },
        YField = "地区",
        XField = "销售额",
        StackField = "细分",
        Label = new BarViewConfigLabel()
        {
            Offset = 0,
            Visible = true,
            Position = "middle",
        },
    };

    #endregion 示例2

}
